<template>
  <div class="base-public-apply">
    <van-empty v-if="isBuilding !== 0" description="当前无住房" />
    <div
      v-else
      style="height: 100%;"
    >
    <van-grid clickable square :column-num="3">
      <van-grid-item @click="changeType">
        <img class="public-img" src="@/assets/羽毛球馆.jpeg" />
        羽毛球馆
      </van-grid-item>
      <van-grid-item @click="changeType">
        <img class="public-img" src="@/assets/乒乓球室.jpeg" />
        乒乓球室
      </van-grid-item>
      <van-grid-item @click="changeType">
        <img class="public-img" src="@/assets/健身房.jpeg" />
        健身房
      </van-grid-item>
      <van-grid-item @click="changeType">
        <img class="public-img" src="@/assets/图书室.jpeg" />
        图书室
      </van-grid-item>
      <van-grid-item icon="records" text="桌球室" @click="changeType">
        <img class="public-img" src="@/assets/桌球室.jpeg" />
        桌球室
      </van-grid-item>
    </van-grid>
    <van-popup
      v-model="showApply"
      position="bottom"
      get-container="#app"
    >
      <van-field
        readonly
        clickable
        name="calendar"
        :value="applyDate"
        label="预约日期"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
      <van-calendar
        :min-date="minDate"
        :max-date="maxDate"
        v-model="showCalendar"
        @confirm="onConfirmDate"
        get-container="#app" />
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="applyTime"
        label="预约时间"
        placeholder="点击选择时间"
        @click="showPicker = true"
        style="margin-top: 20px;"
      />
      <van-popup v-model="showPicker" position="bottom" get-container="#app">
        <van-datetime-picker
          type="time"
          @confirm="onConfirmTime"
          @cancel="showPicker = false"
          :max-minute="timePickerMax"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="durationPicker"
        :value="durationTime"
        label="预约持续时间（小时）"
        placeholder="点击选择预约持续时间（小时）"
        @click="showDurationPicker = true"
        style="margin-top: 20px;"
      />
      <van-popup v-model="showDurationPicker" position="bottom" get-container="#app">
        <van-datetime-picker
          type="time"
          @confirm="onConfirmDuration"
          @cancel="showDurationPicker = false"
          :max-minute="timePickerMax"
        />
      </van-popup>
      <van-button
        round block type="info"
        style="margin-top: 20px;"
        @click="onSubmit"
      >{{ buttonMsg }}</van-button>
    </van-popup>
    </div>
    </div>
</template>

<script>
let today = new Date();
export default {
  name: 'PublicApply',
  data() {
    return {
      showApply: false,
      applyDate: '',
      applyDateGetTime:0,
      showCalendar: false,
      applyTime: '12:00',
      applyhour:12,
      showPicker: false,
      durationTime:'01:00',
      duration:1,
      showDurationPicker:false,
      isBuilding:0,
      buttonMsg:'提交',
      minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
      maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1),
      timePickerMax:0,
      type:'',
    };
  },
  mounted() {
    this.HttpManager.getBuilddingByUid(sessionStorage.getItem("userid")).then(res => {
      this.$toast.clear(true);
      if (res.code === 12006) {
        this.isBuilding = 1;
      } else if (res.code === 21009) {
        this.$notify({type: "danger", message: res.msg});
        this.isBuilding = 1;
      } else if (res.code === 21010) {
        this.$notify({type: "warning", message: res.msg});
        this.isBuilding = 1;
      }
    });
  },
  methods: {
    changeType(e){
      this.showApply = true;
      this.type = e.currentTarget.innerText;
    },
    onConfirmDate (date) {
      this.applyDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.applyDateGetTime = date.getTime();
      this.showCalendar = false;
    },
    onConfirmTime (time) {
      this.applyTime = time;
      this.applyhour = parseInt(time.substring(0,time.indexOf(":")));
      this.showPicker = false;
    },
    onConfirmDuration(time){
      this.durationTime = time;
      this.duration = parseInt(time.substring(0,time.indexOf(":")));
      this.showDurationPicker = false;
    },
    onSubmit () {
      this.showApply = false;
      this.HttpManager.publicRoom_apply({
        "uid":sessionStorage.getItem("userid"),
        "date":this.applyDateGetTime,
        "starttime":this.applyhour,
        "duration":this.duration,
        "type": this.type,
      }).then(res=>{
        if(res.code === 0)
          this.$notify({ type: "success", message: "公共空间申请成功"});
        else
          this.$notify({ type: "warning", message: res.msg});
      });
    },
  },
}
</script>

<style lang="less" scoped>
  .base-public-apply {
    height: 100%;
    overflow: auto;

    /deep/.van-grid-item__content {
      padding: 0;
    }

    .public-img {
      width: 90%;
      height: 70%;
      margin-bottom: 10px;
    }
  }
</style>
